<template>
  <div class="demo">
    <div class="demo-title">连接线</div>
    <div class="demo-content">
      <div style="margin-bottom: 16px">
        showLine:
        <Switch v-model:checked="showLine" />
        <br />
        <br />
        showIcon:
        <Switch v-model:checked="showIcon" />
      </div>
      <Tree
        :show-line="showLine"
        :show-icon="showIcon"
        :default-expanded-keys="['0-0-0']"
        :tree-data="treeData"
        @select="onSelect"
      >
        <template #icon><CarryOutOutlined /></template>
        <template #title="{ dataRef }">
          <template v-if="dataRef.key === '0-0-0-1'">
            <div>multiple line title</div>
            <div>multiple line title</div>
          </template>
          <template v-else>{{ dataRef.title }}</template>
        </template>
        <template #switcherIcon="{ dataRef, defaultIcon }">
          <SmileTwoTone v-if="dataRef.key === '0-0-2'" />
          <component :is="defaultIcon" v-else />
        </template>
      </Tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { CarryOutOutlined, SmileTwoTone } from '@ant-design/icons-vue';
  import Switch from '@sscd/switch';
  import Tree from '@sscd/tree';
  import type { TreeProps } from '@sscd/tree';
  const showLine = ref<boolean>(true);
  const showIcon = ref<boolean>(false);
  const treeData = ref<TreeProps['treeData']>([
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',
          children: [
            { title: 'leaf', key: '0-0-0-0' },
            {
              key: '0-0-0-1',
            },
            { title: 'leaf', key: '0-0-0-2' },
          ],
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [{ title: 'leaf', key: '0-0-1-0' }],
        },
        {
          title: 'parent 1-2',
          key: '0-0-2',
          children: [
            { title: 'leaf 1', key: '0-0-2-0' },
            {
              title: 'leaf 2',
              key: '0-0-2-1',
            },
          ],
        },
      ],
    },
    {
      title: 'parent 2',
      key: '0-1',
      children: [
        {
          title: 'parent 2-0',
          key: '0-1-0',
          children: [
            { title: 'leaf', key: '0-1-0-0' },
            { title: 'leaf', key: '0-1-0-1' },
          ],
        },
      ],
    },
  ]);
  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
</script>
